<template>
  <div>
    <!-- <el-card class="idea-box">
      <div class="school-idea sub-title">学院意见</div>
      <el-link
        class="link"
        :underline="false"
        type="primary"
        @click="handlePreview"
      >点击查看学院意见</el-link>
    </el-card> -->
    <el-card v-if="true" class="evaluate" style="margin-left: 10px" :body-style="{padding:0}">
      <!-- 标题 -->
      <div class="title" style=";font-family:MicrosoftYaHei;margin:0 auto;width:100%;height:5vh;line-height:5vh;background:#305fb4;color:#fff;text-align:center;font-weight:bold;font-size:1.2rem">专家评价</div>
      <div style="padding:1vw">
        <div class="evaluate-option">
          <div class="sub-title" style="margin-bottom:1.5vh">
            <span>人才评价</span>
            <span style="color:#fa3534;font-size:12px;font-weight:500;margin-left: .3vw;">备注 ：(必选，请在相应的“○”打“√”)</span>

          </div>
          <!-- 评价选项列表 -->
          <div class="evaluate-list" style="background:rgba(220,220,220,.3);border-radius:.5vw .5vw;padding:1vw">
            <div
              v-for="(item, index) in evaluateOption"
              :key="index"
              class="evaluate-item"
            >
              <!-- 当前选项标题 -->
              <div class="name">{{ item.title }} ：</div>
              <div
                v-for="(optionItem, optionIndex) in item.option"
                :key="optionIndex"
                class="option-item"
                @click="changeEvaluate(index, optionIndex)"
              >
                <!-- 选中/未选中图标 -->
                <!-- <i
                  class="icon"
                  :class="item.currentIndex - 1 === optionIndex ? 'active' : ''"
                /> -->
                <MyIcon :icon="item.currentIndex - 1 === optionIndex ? 'bi:check-circle-fill' : 'akar-icons:circle' " style="color: #2960c4;" />
                <!-- 选项文字 -->
                <span class="label">{{ optionItem.label }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div style="margin:2vh 0">
        </div> -->
        <!-- 是否建议引进下拉框 -->
        <div class="introduce" style="margin-top: 30px">
          <span class="sub-title" style="margin-right: 18px">是否建议引进</span>
          <el-select
            v-model="form.introduction"
            style="width: 100%"
            placeholder="请选择"
            @change="select_change"
          >
            <el-option
              v-for="item in introduceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- 建议文本框 -->
        <div class="idea-wrap">
          <div class="sub-title text_1">
            对引进人才的意见、建议或对西南交通大学{{personnelDetail.apply_college}}学院学科发展的意见、建议（若有请填写）:
          </div>
          <el-input
            v-model="form.opinion"
            :disabled="is_disabled"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            placeholder="请输入内容"
          />
        </div>

      

        <!-- 专家信息表单 -->
        <my-form
          :ref-obj.sync="specialistInfoForm.ref"
          :form-opts="specialistInfoForm"
          label-position="left"
          :width-size="1"
          @handleEvent="handleEvent"
        />
        <div class="btn-wrap">
          <div class="btn-group">
            <div class="save btn" @click="handleSave('save')">保存</div>
            <!-- <div class="preview btn">预览</div> -->
            <div class="submit btn" @click="handleSave('submit')">提交</div>
          </div>
        </div>
      </div>

    </el-card>
    <!-- <el-dialog
      width="80%"
      title="学院意见"
      :visible.sync="innerVisible"
      append-to-body
    >
      <img class="idea-img" :src="personnelDetail.college_opinion" alt="">
    </el-dialog> -->


  </div>
</template>

<script>
import config from './config'
import {
  getExpertEvaluate,
  saveExpertEvaluate,
  submitExpertEvaluate
} from '@/api/personnel'
import { getUserInfo } from '@/api/user'
import MyIcon from '@/components/MySvg'

export default {
  components: {
    MyIcon
  },
  props: {
    // 人才id
    personnelId: {
      type: String,
      default: ''
    },
    personnelDetail: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      is_disabled: false,
      // innerVisible: false,
      // 评价选项数据
      evaluateOption: JSON.parse(JSON.stringify(config.evaluateOption)),
      // 引进选项
      introduceOptions: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 2
        }
      ],
      // 是否建议引进选中值
      introduction: '',
      // 建议
      opinion: '',
      // 表单配置
      specialistInfoForm: JSON.parse(JSON.stringify(config.specialistInfoForm)),
      // 专家id
      expertId: '',
      form: {
        level: '1',
        potential: '1',
        effect: '1',
        multiple: '1',
        introduction: '',
        opinion: ''
      }
    }
  },
  created () {
    // 用户id
    this.expertId = this.$store.getters.userInfo.id
    // 获取用户保存未提交的数据
    this.getExpertEvaluate({
      personnel_id: this.personnelId,
      expert_id: this.expertId
    })
    // this.evaluateOption = config.evaluateOption
  },
  methods: {
    select_change (y) {
      console.log(y)
      switch (y) {
        case 2:
          this.is_disabled = true
          break
        case 1:
          this.is_disabled = false
          break
      }
    },
    // 改变评价选中
    changeEvaluate (index, optionIndex) {
      console.log(optionIndex, '选中')
      this.evaluateOption[index].currentIndex = optionIndex + 1
      const value = this.evaluateOption[index].option[optionIndex].value
      switch (index) {
        case 0:
          this.form.level = value + 1
          break
        case 1:
          this.form.potential = value + 1
          break
        case 2:
          this.form.effect = value + 1
          break
        case 3:
          this.form.multiple = value + 1
          break
        default:
          break
      }
    },
    // 每一项数据失去焦点时触发
    handleEvent (type, val) {
      this.specialistInfoForm.ref.validate().then(
        (res) => {
          console.log(res)
        },
        (err) => {
          console.log(err)
        }
      )
      switch (type) {
        case 'checkbox':
          console.log('checkbox', val, type)
          break
      }
    },
    // 保存填写的信息 1:保存 2:提交
    handleSave (type) {
      this.specialistInfoForm.ref.validate((valid) => {
        if (!valid) return
        const data = {
          review: {
            personnel_id: this.personnelId,
            expert_id: this.expertId,
            ...this.form
          },
          other: {
            ...this.specialistInfoForm.formData
          }
        }
        switch (type) {
          case 'save':
            this.saveExpertEvaluate(data)
            break
          case 'submit':
            this.submitExpertEvaluate(data)
            break
          default:
            break
        }
      })
    },
    // 获取专家评价保存信息
    async getExpertEvaluate (data) {
      const res = await getExpertEvaluate(data)
      res.data ?? this.getUserInfo()
      Object.keys(this.form).forEach((key) => {
        this.form[key] = res.data[key]
        switch (key) {
          case 'effect':
            this.evaluateOption[2].currentIndex = res.data[key] - 1
            break
          case 'level':
            this.evaluateOption[0].currentIndex = res.data[key] - 1
            break
          case 'multiple':
            this.evaluateOption[3].currentIndex = res.data[key] - 1
            break
          case 'potential':
            this.evaluateOption[1].currentIndex = res.data[key] - 1
            break
          default:
            break
        }
      })
      Object.keys(this.specialistInfoForm.formData).forEach((key) => {
        this.specialistInfoForm.formData[key] = res.data[key]
      })
    },
    // 获取专家个人信息
    async getUserInfo () {
      const res = await getUserInfo()
      const { name, id_card, bank_card, bank_name, inter_bank } = res.data
      const data = {
        name,
        id_card,
        bank_card,
        bank_name,
        inter_bank
      }
      this.specialistInfoForm.formData = data
    },
    // 保存专家填写的信息
    async saveExpertEvaluate (data) {
      console.log("data:",data);
      await saveExpertEvaluate(data)
      this.$message.success('保存成功')
      this.$emit('refresh')
    },
    // 提交
    async submitExpertEvaluate (data) {
      await submitExpertEvaluate(data)
      this.$emit('refresh')
      this.$message.success('提交成功')
    }
    // handlePreview () {
    //   this.innerVisible = true
    // }
  }
}
</script>

<style lang="scss" scoped>
.evaluate {
  .title {
    height: 35px;
    text-align: center;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }

  .evaluate-option {
    .evaluate-list {
      .evaluate-item {
        display: flex;
        align-items: center;
        height: 40px;
        .name {
          min-width: 160px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #333333;
        }
        .option-item {
          display: flex;
          align-items: center;
          margin-right: 67px;
          cursor: pointer;
          .icon {
            display: block;
            flex-shrink: 0;
            position: relative;
            width: 18px;
            height: 18px;
            border: 1px solid #2960c4;
            border-radius: 50%;
            &.active::after {
              content: '';
              display: block;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 10px;
              height: 10px;
              background-color: #2960c4;
              border-radius: 50%;
            }
          }
          .label {
            flex-shrink: 0;
            margin-left: 4px;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }

  .introduce {
    display: flex;
    align-items: center;
    // flex-wrap: nowrap;
    span {
      width: 110px;
      flex-shrink: 0;
    }
  }
  .idea-wrap {
    margin-top: 25px;
    margin-bottom: 20px;
    .sub-title {
      margin-bottom: 18px;
    }
  }
  .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-group {
      display: flex;
      align-items: center;
      .btn {
        margin-right: 10px;
        width: 150px;
        height: 4vh;
        line-height: 4vh;
        text-align: center;
        background: #f28e02;
        border-radius: 3px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }
      .preview {
        background-color: #6759f1;
      }
      .submit {
        background-color: #36ae48;
      }
    }
  }
  .sub-title {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #2960c4;
  }
}

.idea-box {
  align-items: center;
  margin-left: 15px;
  margin-bottom: 10px;
  ::v-deep.el-card__body {
    display: flex;
  }
  .link {
    margin-left: 10px;
  }
}
.school-idea {
  font-size: 18px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: #2960c4;
  margin-top: 0;
}
.idea-img {
  width: 100%;
  height: 1005;
}
.text_1{
  text-indent:50px;
}
</style>
